<template>
  <div class="page3">
    <h2>
      <span><numberScroll :value="2000"></numberScroll>+</span>
      经典案例筑梦幸福家
    </h2>
    <h6>经典案例，寻找属于自己的生活方式</h6>
    <div class="tabs">
      <el-tabs v-model="activeName" class="tab" @tab-click="handleClick">
        <el-tab-pane label="全部" name="1"></el-tab-pane>
        <el-tab-pane label="极简" name="2"></el-tab-pane>
        <el-tab-pane label="轻奢" name="3"></el-tab-pane>
      </el-tabs>
      <div class="item">
        <img
          src=""
          alt=""
        />
      </div>
    </div>
    <swiper
      class="wow"
      loop="true"
      slidesPerView="auto"
      :centeredSlides="true"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(item, index) in minList" :key="index">
        <div class="img-wrap">
          <img alt="" :src="item" />
        </div>
        <div class="text">
          <div class="title">
            <div class="left">
              <h5>上坤半岛</h5>
              <div>
                <i><img src="/src/assets/img/pingfang.png" alt="" /></i>
                <span>300㎡</span>
                <i><img src="/src/assets/img/taoshu.png" alt="" /></i>
                <span>简美风格</span>
                <i><img src="/src/assets/img/address.png" alt="" /></i>
                <span class="first">四川绵阳市</span>
              </div>
            </div>
            <div class="right">
              <div>
                <i>
                  <img
                    src=""
                    alt=""
                    class="active"
                /></i>
              </div>
              <p class="active">
                <span>786</span>
                人喜欢
              </p>
            </div>
          </div>
          <div class="pic">
            <div class="left">
              <img
                alt=""
                src="https://www.shbotao.net//uploads/allimg/20230303/4aa174ee642a3765574b894c9dcc8bc8.jpg"
              />
              <div>
                <h3>张玲松</h3>
                <h4>设计总监</h4>
              </div>
            </div>
            <div class="button-wrap">
              <div class="btn" @click="toPage('jxdetail', 1)">查看案例</div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <div class="btns wow" @click="show" style="visibility: visible">
        <i></i>
        估算我家装修此风格需要多少费用
      </div>
    </swiper>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'

import 'swiper/css'
import { useRouter } from 'vue-router'

const emits = defineEmits('show-event');
const show = ()=>{
  emits('show-event',true);
}


const onSwiper = (swiper) => {
  console.log(swiper)
}
const onSlideChange = () => {}
const activeName = ref('1')
const handleClick = (tab) => {
  console.log(tab.props.name)
}
const minList = ref([
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg',
  'https://www.shbotao.net//uploads/allimg/20230303/29e437efe38fa5e83eb737f7016812ad.jpg'
])

const router = useRouter()
const toPage = (page, id) => {
  let data = {
    name: page
  }
  if (id) {
    data.query = { id: id }
  }
  router.push(data).then(() => {
    window.scrollTo({
      top: 1
    })
  })
}
</script>

<style>
.home .page3 {
  margin-top: 0.99rem;
  padding-bottom: 1rem;
}

.home .page3 h2 {
  font-size: 0.56rem;
  color: #000;
  font-weight: 700;
  padding-left: 0.3rem;
  opacity: 0;

  animation: slide-down-in 2s, fade-in 1s;

  animation-fill-mode: forwards;
}

.home .page3 h2 > span {
  color: #db272a;
  font-family: Gilroy-Medium;
  display: inline-block;
  width: 1.65rem;
}
.home .page3 h6 {
  padding: 0.3rem;
  font-size: 0.25rem;
  color: #999;
  opacity: 0;
  animation: slide-down-in 2s, fade-in 1s;
  animation-fill-mode: forwards;
}
.home .page3 .tabs {
  opacity: 0;
  animation: slide-down-in 2s, fade-in 1s;
  animation-fill-mode: forwards;
  display: flex;
  align-items: center;
  padding: 0 0.3rem 0 0.35rem;
  justify-content: space-between;
  margin-top: 0.32rem;
}

.home .page3 .tabs > div:first-child {
  width: calc(100% - 0.65rem);
}

.home .page3 .tabs > div:first-child > div div {
  display: flex;
}

.home .page3 .tabs > div:nth-child(2) {
  width: 0.45rem;
  cursor: pointer;
  height: 0.4rem;
  display: flex;
  align-items: center;
}

.home .page3 .tabs > div.content-box {
  height: 0.6rem;
  transition: 0.3s;
  padding-left: 0.04rem;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
  overflow: auto;
}

.home .page3 .tabs > div.content-box::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.home .page3 .tabs > div.content-box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.01rem transparent;
  border-radius: 0.1rem;
  background-color: transparent;
}

.home .page3 .tabs > div.content-box::-webkit-scrollbar-thumb {
  border-radius: 0.1rem;
  box-shadow: inset 0 0 0.06rem rgba(0, 0, 0, 0.3);
  background: #dad6d6;
}

.home .page3 .tabs > div .item-wrap {
  display: flex;
}

.home .page3 .tabs > div .item-wrap .item {
  margin-right: 0.5rem;
}

.home .page3 .tabs > div .item {
  flex-shrink: 0;
  font-size: 0.24rem;
  font-weight: 700;
  color: #666;
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: relative;
}

.home .page3 .tabs > div .item span {
  transition: transform 0.3s;
  transform-origin: bottom;
}

.home .page3 .tabs > div .item:after {
  content: '';
  position: absolute;
  bottom: -0.18rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0.05rem;
  background: transparent;
  border-radius: 0.03rem;
  transition: width 0.3s;
}

.home .page3 .tabs > div .el-tabs__item.is-active {
  color: #db272a;
}
.home .page3 .tabs > div .el-tabs__active-bar {
  background: #db272a;
}
.home .page3 .tabs > div .el-tabs__nav-wrap:after {
  background: unset;
}

.home .page3 .tabs > div img {
  width: 0.4rem;
  cursor: pointer;
  transform: translateY(-0.1rem);
}

.home .page3 .swiper .btns,
.home .page3 .swiper {
  opacity: 0;
  animation: slide-down-in 2s, fade-in 1s;
  animation-fill-mode: forwards;
}

.home .page3 .swiper .btns {
  width: 6.9rem;
  height: 0.78rem;
  border: 0.02rem solid #dd292c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.24rem;
  font-weight: 700;
  color: #dd292c;
  cursor: pointer;
  margin: 0 auto;
}

.home .page3 .swiper .btns i {
  background: url(/src/assets/img/jisuanqi.png);
  background-size: 100% auto;
  width: 0.22rem;
  height: 0.24rem;
  margin-right: 0.1rem;
}

.home .page3 .swiper .swiper-wrapper {
  height: 8.4rem;
}

.home .page3 .swiper .swiper-slide {
  width: 92% !important;
  margin: 0 4%;
  padding-top: 0.3rem;
}

.home .page3 .swiper .swiper-slide-prev {
  right: -6%;
}

.home .page3 .swiper .swiper-slide-prev .img-wrap {
  transform-origin: right;
  transform: scale(0.85);
}

.home .page3 .swiper .swiper-slide-next {
  left: -6%;
}

.home .page3 .swiper .swiper-slide-next .img-wrap {
  transform-origin: left;
  transform: scale(0.85);
}

.home .page3 .swiper .img-wrap {
  transition: transform 0.3s;
  border-radius: 0.2rem;
  overflow: hidden;
  height: 50%;
  box-shadow: 0 0.13rem 0.3rem 0 hsla(0, 0%, 63.1%, 0.35);
}

.home .page3 .swiper .img-wrap img {
  width: 100%;
  border-radius: 0.2rem;
}

.home .page3 .swiper .text {
  padding: 0.46rem 0.3rem 0;
}

.home .page3 .swiper .text > div {
  display: flex;
}

.home .page3 .swiper .text > div.title {
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid #e7e7e7;
  padding-bottom: 0.33rem;
}

.home .page3 .swiper .text > div.title h5 {
  font-size: 0.36rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.25rem;
}

.home .page3 .swiper .text > div.title .left > div {
  display: flex;
  align-items: center;
  font-size: 0.24rem;
  font-weight: 700;
  color: #000;
}

.home .page3 .swiper .text > div.title .left > div i {
  width: 0.23rem;
  height: 0.23rem;
}

.home .page3 .swiper .text > div.title .left > div i img {
  max-width: 100%;
}

.home .page3 .swiper .text > div.title .left > div span {
  margin: 0 0.55rem 0 0.15rem;
}

.home .page3 .swiper .text > div.title .left > div span.first {
  margin-right: 0;
}

.home .page3 .swiper .text > div.title .right {
  position: relative;
  height: 1.16rem;
}

.home .page3 .swiper .text > div.title .right div {
  width: 0.74rem;
  height: 0.74rem;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.home .page3 .swiper .text > div.title .right div img {
  width: 0.5rem !important;
  height: 0.5rem;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  transition: all 0.3s;
}

.home .page3 .swiper .text > div.title .right div img:nth-child(2) {
  -webkit-clip-path: ellipse(0 0 at 0 100%);
  clip-path: ellipse(0 0 at 0 100%);
}

.home .page3 .swiper .text > div.title .right div img:nth-child(2).active {
  -webkit-clip-path: ellipse(140% 141% at 0 100%);
  clip-path: ellipse(140% 141% at 0 100%);
}

.home .page3 .swiper .text > div.title .right p {
  position: absolute;
  width: 1.56rem;
  white-space: nowrap;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 0.22rem;
  margin-top: 0.17rem;
  font-weight: 400;
  color: #a0a0a0;
  text-align: center;
}

.home .page3 .swiper .text > div.title .right p.active {
  color: #333;
}

.home .page3 .swiper .text > div.title .right p.active span {
  font-family: Gilroy;
  color: #000;
}

.home .page3 .swiper .text > div.pic {
  justify-content: space-between;
  align-items: center;
  padding: 0.37rem 0 0.68rem;
}

.home .page3 .swiper .text > div.pic .left {
  display: flex;
  align-items: center;
}

.home .page3 .swiper .text > div.pic .left img {
  width: 0.89rem;
  height: 0.89rem;
  border-radius: 50%;
  margin-right: 0.35rem;
}

.home .page3 .swiper .text > div.pic .left div h3 {
  font-size: 0.28rem;
  font-weight: 700;
  color: #000;
}

.home .page3 .swiper .text > div.pic .left div h4 {
  font-size: 0.22rem;
  font-weight: 400;
  color: #999999;
  margin-top: 0.1rem;
}
</style>